<template>
  <div ref="echart" class="echart"></div>
</template>

<script>
export default {
  data() {
    return {
      echart: null
    }
  },
  mounted() {
    this.initDta()
  },
  methods: {
    initDta() {
      this.echart = this.$echarts.init(this.$refs.echart)
      const option = {
        title: {
          show: false,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: `{b} : {c}艘次`,
        },
        grid: {
          top: '15%',
          left: '5%',
          right: '5%',
          bottom: '8%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: ['集装箱船', '油船', '散货船', '其他'],
            axisLabel: {
              color: '#5EE7FE',
              fontSize: '16',
              padding: 4,
              fontWeight: 'bold',
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
        ],
        yAxis: {
          type: 'value',
          axisLabel: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: '#fff',
              opacity: 0.2,
            },
          },
        },
        series: [
          {
            data: [
              {
                value: '17',
                itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#00F7FF', // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#0084FE', // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                },
              },
              {
                value: '5',
                itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#FFC13F', // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#FF5D15', // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                },
              },
              {
                value: '17',
                itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#B23ECB', // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#8447FF', // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                },
              },
              {
                value: '53',
                itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#3F8FFC', // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#2035FF', // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                },
              },
            ],
            type: 'bar',
            barWidth: '20',
            itemStyle: {
              normal: {
                label: {
                  formatter: '{c}' + '艘',
                  show: true,
                  position: 'top',
                  textStyle: {
                    fontWeight: 'bolder',
                    fontSize: '12',
                    color: '#FFF',
                  },
                },
              },
            },
          },
        ],
      }
      this.echart.setOption(option)
    }
  }
}
</script>

<style scoped lang="less">
.echart {
  width: 100%;
  height: 100%;
}
</style>
